<template>
  <fieldset>
    <legend>个人中心</legend>
    <h1>他们都是弟弟</h1>
    <h1>
      vuex中的name
      <!-- <i style="color: red">{{ $store.state.name }}</i> -->
      <i style="color: red">{{ nickName.split("").reverse().join("") }}</i>
      <i>reverseN:{{ reverseN }}</i>
      age:
      <i>{{ age }}</i>
    </h1>
    <fieldset>
      <legend>计算器</legend>
      <!-- <button @click="handleReduce">-</button> -->
      <button @click="REDUCE(777)">-</button>
      &nbsp;
      <span>{{ num }}</span>
      &nbsp;
      <button @click="handleIncrease">+</button>
    </fieldset>
  </fieldset>
</template>
<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["name", "age", "nickName", "num"]),
    ...mapGetters(["reverseN"]),
  },
  mounted() {
    console.log(this.$store.state.age);
    console.log(this.nickName);
  },
  methods: {
    handleIncrease() {
      this.$store.commit("INCREASE", "传给store的参数1");
    },
    // handleReduce(){
    //   this.$store.commit('REDUCE', '传给store的参数2')
    // },
    ...mapMutations(["REDUCE"]),
  },
};
</script>
